<script setup>
import CategoryPanel from './CategoryPanel.vue';
const { categoryData } = defineProps(['categoryData'])
</script>
<template>
	<CategoryPanel title="全部分类">
		<ul class="category-list">
			<li v-for="i in categoryData.children" :key="i.id">
				<router-link class="category-item" :to="`/category/sub/${i.id}`">
					<img v-img-lazy="i.picture" alt="">
					<p>{{ i.name }}</p>
				</router-link>
			</li>
		</ul>
	</CategoryPanel>
</template>
<style scoped lang="scss">
.category-list {
	display: flex;
	justify-content: space-around;
	align-items: center;

	.category-item {
		display: flex;
		flex-direction: column;
		align-items: center;

		&:hover {
			p {
				color: $xtxColor;
			}

		}

		img {
			width: 100px;
			height: 100px;
			margin-bottom: 10px;
		}

		p {
			font-size: 14px;
			color: #333;
			margin-bottom: 0;
		}
	}
}
</style>